<template>
  <DataForm
    :columns="columns"
    v-model="record"
    v-loading="loading.value"
  />
</template>

<script lang="ts" setup>
import { reactive, computed, ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

import DataForm from '@/components/data-form/index.vue';

import TypeVO from '@/bean/vo/TypeVO';
import AgColumn from '@/bean/vo/AgColumn';
import FieldApi from '@/api/setting/field';

import parseNumber from "@/methods/parseNumber";
import Loading from '@/utils/Loading';
import RecordApi from '@/api/record';

const $route = useRoute();

const loading = reactive(new Loading());

const id = computed(() => {
  return parseNumber($route.params.id);
});

const columns = ref<AgColumn<TypeVO>[]>([]);
function loadColumns() {
  return loading.execute(async() => {
    const fieldInfos = await FieldApi.getList(record.value.typeId);
    const dyColumns = fieldInfos.map<AgColumn<TypeVO>>(item => ({
      title: item.displayName,
      field: item.name,
      type: item.renderType as any,
      editable: true
    }));
    columns.value = [
      ...dyColumns
    ];
  });
}

const record = ref<any>({});
function loadData() {
  return loading.execute(async() => {
    record.value = await RecordApi.view(id.value);
    loadColumns();
  });
}

onMounted(() => {
  loadData();
});
</script>
